<template>
	<view>
		<view class="picmask"></view>
		<view v-if="type==1"><!--登录-->
		
			<view class="loginbox">
				<view class="close" @click="close"><icon type="clear" size="26"/></view>
				<view class="page">
				  <view class="login-box">
					  <view class="close" @click="close"><icon type="clear" size="26"/>
						<image class="close-img" src="/static/icon_close.png"></image>
					  </view>
				    <view class="login-card-title">
				      <view class="login-card-title-content"> 账号登录 </view>
				    </view>
				    <view class="login-card-input">
				      <!-- 输入框头部图标 -->
				      <uni-easyinput
				        class="hj-input"
				        v-model="mobile"
				        focus
				        maxlength="20"
				        :trim="true"
				        @focus="UserNamePassWrodFocusBorderStyle"
				        :styles="inputColorConfigToUserName"
				        @blur="UserNamePassWrodBlurBorderStyle"
				        placeholder="请输入账号"
				      ></uni-easyinput>
				      <!-- 输入框头部图标 -->
				      <uni-easyinput
				        class="hj-input"
				        v-model="password"
				        type="password"
						maxlength="20"
				        @focus="PassWordFocusBorderStyle"
				        @blur="PassWordBlurBorderStyle"
				        :styles="inputColorConfigToPassWord"
				        placeholder="请输入密码"
				      ></uni-easyinput>
				    </view>
				    <view class="login-card-loginIn">
				      <view class="login-card-loginIn-btn" @click="login">
				        登 录
				      </view>
				    </view>
					<view style="text-align: center;"><text style="font-size: 0.8em ; color: #3a6eff;" @click="gozhuce">注册账号</text></view>
				     
				  </view>
				</view>
			</view>
		</view>
		<view v-if="type==6"><!--绑定微信-->
			<view class="showpicbox">
				
				<view class="page">
					
				  <view class="showpic-box">
					  <!-- <view class="close" > -->
						
						<image @click="closepic" style="position: absolute; z-index: 10; width: 70px; height: 70px; right: -33px; top: -8px;" src="/static/lanhu_jichusheding/delete.png"></image>
						
					  <!-- </view> -->
					<image @click="closepic" style="width: 100%; height: 100%; margin: 10px; background-color: rgb(95 93 212 / 50%); border-style: groove;" mode="aspectFit"  :src=showimg  ></image>
				  </view>
				  
				</view>
				
			</view>
		</view>
		<view v-else-if="type==2">
			<view class="redbox">
				<image src="/static/gepopup/hongbao_bg.png"></image>
				<view class="wrapBox">
					<view class="tips">恭喜您升级为达人！<view>获得奖励红包</view></view>
					<view class="money">￥<text>{{money}}</text></view>
					<view class="btn" @click="eventClick">收下红包</view>
				</view>
				<view class="close" @click="close"><icon type="clear" size="30" color="#fff"/></view>
			</view>
		</view>
		<view v-else-if="type==3">
			<view class="messBox">
				<view class="wrapBox">
					<view class="title">{{title}}</view>
					<view class="desc">
						<rich-text :nodes="content"></rich-text>
					</view>
					<view class="btn"  @click="close">我知道了</view>
				</view>
			</view>
		</view>
		<view v-else-if="type==4">
			<view class="updateBox">
				<view class="tubiao"><image src="/static/gepopup/ic_ar.png"></image></view>
				<view class="wrapbox">
					<view class="version">发现新版本{{version}}</view>
					<view class="desc-t">本次更新内容：</view>
					<view class="desc">
						<rich-text :nodes="content"></rich-text>
					</view>
					<view class="btnbox">
						<view class="btnno" @click="close">暂不升级</view><view class="btnUp" @click="eventClick">立即升级</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="type==5">
			<view class="updateBox1">
				<image src="/static/gepopup/update_bg.png"></image>
				<view class="wrapBox">
					<view class="version">发现新版本<view>v{{version}}</view></view>
					<view class="desc-t">更新内容：</view>
					<view class="desc">
						<rich-text :nodes="content"></rich-text>
					</view>
					<view class="btnbox">
						<view class="btnno" @click="close">暂不升级</view><view class="btnUp" @click="eventClick">立即升级</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
	
	export default {
		props: {
			type: {
				type: String,
				default:'1'
			},
			title:{
				type:String,
				default:''
			},
			money:{
				type:Number,
				default:1
			},
			content:{
				type:String,
				default:''
			},
			version:{
				type:String,
				default:''
			},
			showimg:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				// 输入框边框颜色默认值
				colorDefault:'#b4b4b4',
				// 输入框边框聚焦值
				colorFocusColor:'#3cb79a',
				// 输入框颜色配置
				inputColorConfigToUserName: {
				  color: "#000000",
				  disableColor: "#eee",
				  borderColor: "#b4b4b4",
				},
				// 输入框颜色配置
				inputColorConfigToPassWord: {
				  color: "#000000",
				  disableColor: "#eee",
				  borderColor: "#b4b4b4",
				},
				mobile: "",
				password: "",
			};
		},
		methods:{
			gozhuce(){
				window.open("https://yun.thecover.cn/user/register")
			},
			showT(){
				
				uni.showToast({
					title:'请联系超管susie@thecover.co',
					icon: 'none',
					duration:3000,
				});
				console.log(123)
			},
			closepic(){
				this.$emit('closepic');
			},
			close(){
				this.$emit('close');
			},
			eventClick(){
				console.log('eventClick')
				this.$emit('eventClick');
			},
			login(){
				this.$emit("login",{"m":this.mobile,"p":this.password})
				
			},
			// 输入框聚焦变换边框样式
			UserNamePassWrodFocusBorderStyle(){
			  this.inputColorConfigToUserName.borderColor
			  = this.colorFocusColor;
			},
			PassWordFocusBorderStyle(){
			  this.inputColorConfigToPassWord.borderColor
			  = this.colorFocusColor;
			},
			// 输入框失去焦点变换边框样式
			UserNamePassWrodBlurBorderStyle(){
			  this.inputColorConfigToUserName.borderColor
			  = this.colorDefault;
			},
			PassWordBlurBorderStyle(){
			  this.inputColorConfigToPassWord.borderColor
			  = this.colorDefault;
			},
			
		},
		//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
		onInit() {},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad() {},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		beforeDestroy() {},
		//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
		onReachBottom() {},
		onShareAppMessage() {},
		created() {},
	}
</script>

<style lang="scss">
	.loginbox{
		position: absolute;
		top:7%;
		left: 36%;
		z-index: 998;
		width:500px;
		height: 400px;
		// background-color: #fff;
		border-radius:30rpx;
		padding:30rpx 0rpx;
		.close{
			position: absolute;
			margin: 5px;
			margin-top: 10px;
			top:0px;
			width: 35px;
			height: 35px;
			right:0px;
			z-index: 999;
			text-align: center;
		}
		.weixin{
			margin:20px 0 0 0px;
			text-align: center;
			image{
				width:100px;
				height:100px;
			}
		}
		.tips{
			padding:10rpx 20rpx;
			text-align:center;
			font-size:35rpx;
			color:#333;
		}
	}
	
	.showpicbox{
		position: relative;
		// top:7%;
		// left: 9%;
		z-index: 998;
		width:100%;
		height: 100%;
		// background-color: #fff;
		border-radius:30rpx;
		padding:30rpx 0rpx;
		.close{
			// position: absolute;
			// margin: 5px;
			// margin-top: 10px;
			// top:-8px;
			// width: 35spx;
			// height: 35px;
			// right:-30px;
			z-index: 999;
			text-align: center;
		}
		.weixin{
			margin:20px 0 0 0px;
			text-align: center;
			image{
				width:100px;
				height:100px;
			}
		}
		.tips{
			padding:10rpx 20rpx;
			text-align:center;
			font-size:35rpx;
			color:#333;
		}
	}
	.showpic-box {
	  top: -1%;
	  position: absolute;
	  width: 75%;
	  left: 3%;
	  right: 10%;
	  height: 75%;
	  padding: 30rpx;
	  
	  border-radius: 20rpx;
	  
	}
	.picmask{
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
		z-index:888;
		background-color: rgba(0, 0, 0, 0.0);
	}
	.mask{
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
		z-index:888;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.btn{
		width:70%;
		margin:20rpx auto;
		margin-top:40rpx;
		padding:20rpx 0px;
		text-align:center;
		background:#4884FF;
		border-radius: 34px;
		font-size: 30rpx;
		color:#fff;
	}
	//微信弹窗
	.wxbox{
		position: absolute;
		top:20%;
		z-index: 998;
		width:80%;
		left:10%;
		background-color: #fff;
		border-radius:30rpx;
		padding:30rpx 0rpx;
		.close{
			position: absolute;
			top:5px;
			right:10px;
			z-index: 999;
			text-align: center;
		}
		.weixin{
			margin:20px 0 0 0px;
			text-align: center;
			image{
				width:100px;
				height:100px;
			}
		}
		.tips{
			padding:10rpx 20rpx;
			text-align:center;
			font-size:35rpx;
			color:#333;
		}
	}
	//红包弹窗
	.redbox{
		position: absolute;
		top:12%;
		z-index: 998;
		width:90%;
		left:5%;
		padding:10rpx 0rpx;
		height:750rpx;
		image{
			width:100%;
			height:100%;
		}
		.close{
			text-align: center;
		}
		.wrapBox{
			position: absolute;
			width:60%;
			left:20%;
			top:320rpx;
			padding:10rpx 0rpx;
			text-align:center;
			.tips{
				font-size:35rpx;
				color:#fff;
				font-weight:bold;
				text{
					font-weight: normal;
				}
			}
			.money{
				font-size: 35rpx;
				color:#fff;
				margin-top:30rpx;
				font-weight: bold;
				text{
					font-size: 50rpx;
				}
			}
			.btn{
				width:80%;
				margin:20rpx auto;
				margin-top:40rpx;
				padding:20rpx 0px;
				text-align:center;
				background:linear-gradient(to bottom,#FFF04D,#FFE06B);
				border-radius: 34px;
				font-size: 30rpx;
				color:#CF2A2A;
				font-weight: bold;
			}
		}
	}
	.messBox{
		position: absolute;
		top:12%;
		z-index:998;
		width:80%;
		left:10%;
		padding:10rpx 0rpx;
		.wrapBox{
			background-color: #fff;
			border-radius: 20rpx;
			padding:30rpx;
			.title{
				text-align:center;
				font-size: 32rpx;
				font-weight: bold;
			}
			.desc{
				height:400rpx;
				margin-top:20rpx;
				font-size: 30rpx;
			}
		}
	}
	.updateBox{
		position: absolute;
		top:20%;
		z-index:998;
		height:300rpx;
		width:80%;
		left:10%;
		.tubiao{
			text-align: center;
			image{
				z-index: 999;
				width:200rpx;
				height:130rpx;
			}
		}
		.wrapbox{
			position: relative;
			z-index: 998;
			top:-70rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding:30rpx 40rpx;
			.version{
				margin-top:50rpx;
				font-size: 35rpx;
				color:#333;
				font-weight: bold;
				text-align: center;
			}
			.desc-t{
				margin-top:30rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.updateBox1{
		position: absolute;
		top:15%;
		z-index:998;
		width:80%;
		left:10%;
		padding:10rpx;
		height:700rpx;
		image{
			width:100%;
			height:100%;
		}
		.wrapBox{
			position: absolute;
			width:85%;
			left:50rpx;
			top:40rpx;
			padding:10rpx 20rpx;
			.version{
				font-size: 35rpx;
				color:#fff;
			}
			.desc-t{
				margin-top:100rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.desc{
		height:230rpx;
		overflow:scroll;
		margin-top:10rpx;
		font-size: 30rpx;
		color:#666;
		line-height:50rpx;
	}
	.btnbox{
		display: flex;
		justify-content: space-around;
		margin:40rpx 0rpx 20rpx 0rpx;
		margin-top:50rpx;
		.btnno{
			padding:10rpx 30rpx;
			background-color: #f8f8f8;
			border-radius: 10rpx;
			font-size: 30rpx;
			color:#666;
		}
		.btnUp{
			padding:10rpx 30rpx;
			background-color: #4884FF;
			border-radius: 10rpx;
			font-size: 30rpx;
			color:#fff;
		}
	}
	
	.page {
	  position: relative;
	  height: 100vh;
	}
	.top-background-raduis {
	  height: 30%;
	  background-color: #d8d8d8;
	  border-bottom-left-radius: 50%;
	  border-bottom-right-radius: 50%;
	}
	/deep/ .is-input-border{
	  border-radius: 7px !important;
	}
	/deep/ .uni-easyinput__content{
	  min-height: 39px !important;
	}
	.hj-input {
	  margin-top: 15rpx;
	  font-weight: 500;
	}
	.hj-input:nth-child(2) {
	  margin-top: 35rpx;
	}
	.close-img{
		width: 16px;
		height: 16px;
	}
	.login-box {
	  top: 5%;
	  position: absolute;
	  width: 75%;
	  left: 10%;
	  right: 10%;
	  height: 600rpx;
	  padding: 30rpx;
	  background-color: white;
	  border-radius: 20rpx;
	  // box-shadow: 9px 9px 6px #e3e3e3;
	  
	  .login-card-input {
	    // background-color: violet;
	    // height: 50%;
	    padding: 5rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	  }
	  .login-card-title {
	    // height: 20%;
	    // background-color: black;
	    padding: 30rpx;
	    display: flex;
		
	    justify-content: center;
	    .login-card-title-content {
	      font-size: 1.2em;
	      color: black;
		  font-weight: 600;
	      // border-bottom: 3px solid #3cb79a;
	    }
	  }
	  .login-card-loginIn{
	    height: 140rpx;
	    display: flex;
	    justify-content: center;
	    padding: 10rpx;
		margin-top: 20rpx;
	    align-items: center;
	    .login-card-loginIn-btn{
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      background-image: linear-gradient(left, #823DFF,#823DFF,#3A6EFF,#3A6EFF);
	      background: -webkit-linear-gradient(left, #823DFF, #823DFF, #3A6EFF, #3A6EFF);
	      background: -o-linear-gradient(left,#823DFF, #823DFF, #3A6EFF, #3A6EFF);
	      background: -moz-linear-gradient(left,#823DFF, #823DFF, #3A6EFF, #3A6EFF);
	      background: -ms-linear-gradient(left,#823DFF, #823DFF, #3A6EFF, #3A6EFF);
	      width: 100%;
	      font-size: 1.2em;
	      height: 80%;
	      border-radius: 20rpx;
	      color: white;
	    }
	  }
	  .login-bottom-info{
	    height: 5%;
	    display: flex;
	    font-size: 0.7em;
	    color: #3cb79a;
	    justify-content: end;
	
	  }
	}
	.bottom-message{
	  position: absolute;
	  height: 70rpx;
	  display: flex;
	  width: 100%;
	  justify-content: center;
	  align-items: center;
	  font-size: 0.9em;
	  overflow: hidden;
	  color: #969898;
	  top: 40rpx;
	}
</style>
